<template>
	<div class="addDoctor">
		<span class="tittle">康恒医院添加医生信息</span>
		<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="addForm">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="sex">
				<el-radio class="radio" v-model="form.sex" label="1">男</el-radio>
				<el-radio class="radio" v-model="form.sex" label="2">女</el-radio>
			</el-form-item>
			<el-form-item label="入职日期" prop="date">
				<el-col :span="11">
					<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="学历" prop="degree">
				<el-select v-model="form.degree" placeholder="请选择">
					<el-option label="大专" value="大专"></el-option>
					<el-option label="本科" value="本科"></el-option>
					<el-option label="研究生" value="研究生"></el-option>
					<el-option label="博士" value="博士"></el-option>
					<el-option label="硕士" value="硕士"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="科室" prop="department">
				<el-select style="width: 130px" placeholder="请选择科室" v-model="form.office" @change="handleSelectChange">
					<el-option v-for="item in shiftListOffice" :key="item.id" :label="item.text" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="专业" prop="major">
				<el-input v-model="form.major"></el-input>
			</el-form-item>
			<el-form-item label="职称" prop="profession">
				<el-input v-model="form.profession"></el-input>
			</el-form-item>
			<el-form-item class="buttonAdd">
				<el-button type="primary" @click="submitForm('form')">增 加</el-button>
				<el-button type="danger" @click="resetForm ('form')">重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script type="text/ecmascript-6">
	export default {
		data() {
			return {
				form: {//新增的数据
					name: '',
					sex: '1',
					date: '',
					degree: '',
					major: '',
					profession: '',
					office: '',
					officeId: ''
				},
				shiftListOffice: [],//所有科室信息
				shiftListOfficeValue: {
					office: '',//科室名称
					officeId: ''//科室简写英文名称
				},
				// 验证规则
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}],
					date: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'blur'
					}],
					degree: [{
						required: true,
						message: '请选择学历',
						trigger: 'change'
					}],
					major: [{
						required: true,
						message: '请填写专业',
						trigger: 'blur'
					}],
					profession: [{
						required: true,
						message: '请填写职称',
						trigger: 'blur'
					}],
					office: [{
						required: true,
						message: '请填写科室',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			// 增加的方法
			submitForm(form) {
				this.form.office = this.shiftListOfficeValue.office;
				this.form.officeId = this.shiftListOfficeValue.officeId;
				let apilogin = "http://localhost:8088/insertDoctor"
				this.$http.post(apilogin,
					this.form
				).then((response) => {
					this.$message({
						message: '医生新增成功！',
						type: 'success'
					});
				}, response => {
					console.log(this.form)
					this.$message({
						message: '医生新增失败',
						type: 'error'
					});
				})
			},
			// 重置方法
			resetForm(form) {
				this.$refs[form].resetFields();
			},
			//科室变化时
			handleSelectChange(officeValue) {
				const form = this.shiftListOffice.find(nurse => nurse.value === officeValue);
				console.log(form);
				if (form) {
					this.shiftListOfficeValue = {
						office: form.text,
						officeId: form.value
					};
				}
			}
		},
		created() {//查询所有科室
			let that = this;
			let API = "http://localhost:8088/getDepartment";
			this.$http.get(API).then((response) => {
				that.shiftListOffice = [...response.body];
			});
		}
	};
</script>

<style>
	.addDoctor .el-input {
		width: 384px;
	}

	.addDoctor .tittle {
		display: block;
		text-align: center;
		font-size: 24px;
		line-height: 80px;
	}

	.addDoctor .addForm {
		width: 470px;
		margin: auto;
	}

	.addDoctor .addForm .buttonAdd {
		text-align: center;
	}
</style>